<?php include COMMON_PATH.'/index/header.html' ?>
<link rel="stylesheet" href="/index/js/swiper/swiper.min.css">
<link href="/index/js/libs/scroll-bar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
<link href="/index/css/live.css" rel="stylesheet" type="text/css"/>

<style>
    .comment-out-wrap{
        height: 660px;
    }

</style>
<div class="main-content">
    <!--直播-->
    <div class="home-live-content clearfix">
        <div class="live-mid-content " style="width: 750px; margin-left: 0;">
            <div class="top">
                <img class="avatar" src="<?=$live['avatar']?>"  onerror = "iService.imgNoFind(this)"><div class="info">
                <p class="tips"><span><?=$live['name']?></span></p>
                <p>
                    <span class="icon-view-3">
                        <b>在线</b>
                        <i class="fans-num"><?=$live['click']?></i>
                    </span>
                    <span class="time-wrap">
                        已开播：<i class="time-tamp"><?=$live['play']?></i>
                    </span>
                </p>
            </div>
            </div>
            <div id="video-train">
                <?php if($video['url'][2]):?>
                    <span class="icon-fullscreen"></span>
                    <div class="tips-wrap"></div>
                    <ul id="gift-show-wrap">
                        <li>
                            <img class="fans-avatar" src="flower_mark.png" alt="" />
                            <div class="fans-info">
                                <h3>Wakeup</h3>
                                <p>送一个鲜花</p>
                            </div>
                            <img class="gift-img" src="flower_mark.png" alt="" />
                            <span class="gift-num">X2</span>
                        </li>
                    </ul>
                <?php else:?>
                    <div class="playback-tips-wrap">
                        <!--<img class="avatar" src="<?=$play['avatar']?>"  onerror = "iService.imgNoFind(this)">
                        <p class="teach"><?=$info['name']?>:<?=$info['nickname']?></p>-->
                        <h3>直播已结束</h3>
                        <div class="back-info-wrap">
                            <div class="item">
                                <p class="content">00:35</p>
                                <p class="title">直播时长</p>
                            </div>
                            <div class="item">
                                <p class="content">123</p>
                                <p class="title">观看人数</p>
                            </div>
                        </div>
                    </div>
                <?php endif;?>

            </div>
        </div>
        <div class="live-right-content">
            <div class="top">
                <p>分享到微信：<a href="javascript:void(0)" class="am-icon-weixin"></a></p>
            </div>

            <div id="live-tab" class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">聊天室</li>
                    <li>在线人员</li>
                </ul>
                <div class="layui-tab-content">
                    <!--聊天室-->
                    <div class="layui-tab-item layui-show">
                        <div class="comment-out-wrap">
                            <div class="comment-wrap scroll-common-wrap" style="height: 640px;">
                                <ul class="comment-list-wrap clearfix">

                                </ul>
                            </div>
                            <div class="comment-tool-wrap" style="bottom: 0;">
                                <input placeholder="和大家一起讨论吧" id="send_msg_text" class="comment-input" type="text" />
                                <i class="fr" id="btn-send">发送</i>
                            </div>
                        </div>
                    </div>
                    <!--在线人员-->
                    <div class="layui-tab-item">
                        <div class="">
                            <ul class="online-list-wrap clearfix">
                                <?php foreach($online['lists'] as $v):?>
                                <li class="clearfix">
                                    <img class="avatar" src="<?=$v['avatar']?>" onerror="iService.imgNoFind(this)">
                                    <div class="user-info">
                                        <p><?=$v['nickname']?></p>
                                        <p><?=$v['section']?> - <?=$v['duties']?></p>
                                    </div>
                                    <?php if($v['status'] == 2):?>
                                    <span class="on-phone">连麦</span>
                                    <?php elseif($v['status'] == 1):?>
                                    <span data-udid="<?=$v['udid']?>" class="wait-phone">麦序</span>
                                    <?php endif;?>
                                </li>
                                <?php endforeach;?>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
低延迟推流
第一个是主播
<?=var_dump($video['allurl'])?>

<?php include COMMON_PATH.'/index/footer.html' ?>
<script src="/index/js/libs/scroll-bar/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="/index/js/swiper/swiper.min.js"></script>

<script type="text/javascript" src="/index/sdk/TcPlayer-2.2.0.js"></script>
<script type="text/javascript" src="/index/js/libs/qrcode.min.js"></script>

<script type="text/javascript">
    var avChatRoomId = "<?=$video['channel']?>";//群组ID

    //调用后台接口得到用户im信息以及视频状态
    var loginInfo = {
        'sdkAppID': "<?=$video['sdkAppID']?>", //用户所属应用id,必填
        'appIDAt3rd': "<?=$video['sdkAppID']?>", //用户所属应用id，必填
        'accountType': "<?=$video['accountType']?>", //用户所属应用帐号类型，必填
        'identifier': "<?=$video['udid']?>", //当前用户ID,必须是否字符串类型，选填
        'identifierNick': "<?=$video['nickname']?>", //当前用户昵称，选填
        'userSig': "<?=$video['tim']?>", //当前用户身份凭证，必须是字符串类型，选填
        'headurl': "<?=$video['avatar']?>", //当前用户默认头像，选填
    };

    var my_swiper = new Swiper('.swiper-container', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        pagination: '.swiper-pagination',
//        autoplay:'1500',
        loop:true,
        paginationType: 'fraction'
    });
    var useravatar = "<?=$user['avatar']?>";


</script>


<script>
    navActive(2);
    var scroll_Init = function(){
        var content=$(".scroll-common-wrap"),autoScrollTimer=500,autoScrollTimerAdjust;
        content.mCustomScrollbar({
            scrollButtons:{enable:false},
            callbacks:{
                whileScrolling:function(){
                    //autoScrollTimerAdjust=autoScrollTimer*this.mcs.topPct/100;
                },
                onScroll:function(){

                }
            }
        });
    };
    scroll_Init();

    var scrollAuto = function(now_wrap){
        $(now_wrap).mCustomScrollbar("scrollTo","bottom",{scrollInertia:500,scrollEasing:"easeInOutSmooth"});
    };

    $(function(){
        var play_time = "<?=$live['play']?>";
        if(play_time!=''){
            iService.showTiming(play_time,$('.time-tamp')[0]);
        }
        var comment_input = $(".comment-input"),
        btn_send = $('#btn-send');
        comment_input.keydown(function(e) {
            if (e.keyCode == 13) {
                onSendMsg(1,$("#send_msg_text").val());
            }
        });
        btn_send.on('click',function(){
            onSendMsg(1,$("#send_msg_text").val());
        });
//      scrollAuto();
        layui.use(['element','layer', 'laypage', 'laydate'], function(){
            var layer = layui.layer //获得layer模块
                    ,laypage = layui.laypage //获得laypage模块
                    ,laydate = layui.laydate //获得laydate模块
                    ,element = layui.element;
            $('.icon-plus').on('click',function(){
                my_swiper.stopAutoplay();
                layer.open({
                    area: ['1000px', '700px'],
                    type: 1,
                    title: false,
                    resize: false,
                    shadeClose:false,
                    content: '<div class="swiper-pic-wrap">'+$('.swiper-slide-active').html()+'</div>',
                    success: function(layero, index){

                    },
                    cancel: function(index, layero){
                        my_swiper.startAutoplay();

                    }
                });
            });
            $('.am-icon-weixin').on('click',function(){
                layer.open({
                    area: ['300px', '300px'],
                    type: 1,
                    title: false,
                    resize: false,
                    shadeClose:false,
                    content: '<div class="code-share-wx-wrap"><div id="qrcode"  /><p>微信扫一扫分享到手机</p></div>',
                    success: function(){
                        var qrcode = new QRCode(document.getElementById("qrcode"), {
                            width : 120,
                            height : 120
                        });
                        qrcode.makeCode('http://'+'<?=$_SERVER["HTTP_HOST"]?>/Share/meeting/index?mid=<?=$live["mid"]?>');
                    }
                });
            });

            var play_url = "<?=$video['url'][2]?>",
                flv_mp4 = "<?=$video['url'][1]?>",
                    live_height = 712,
                    live_width = 400
                /*,
                    live_height = 750,
                    live_width = 750*/
            ;

            if(!play_url){
                $('.tips-wrap').html('直播已经结束，即将跳转会议列表').show();
                setTimeout(function(){
                    location.href = '/Meeting/backlists';
                },2000);
                return false;
            }
            var player =  new TcPlayer('video-train', {
                rtmp: "",
                "m3u8": play_url,
                "flv":  flv_mp4, //增加了一个flv的播放地址，用于PC平台的播放
                "autoplay" : true,      //iOS下safari浏览器是不开放这个能力的
                "flash": false,
                "coverpic" : {"style": "cover", "src": "/index/img/cover.png"},
                "width" :  live_width,//视频的显示宽度，请尽量使用视频分辨率宽度
                "height" : live_height, //视频的显示高度，请尽量使用视频分辨率高度
                "controls":"no",
                "live": true,
                wording: {
                    2032: '请求视频失败，请检查网络',
                    2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
                },
                listener: function (msg) {
                    console.log(msg);
                    if(msg.type=='ended'){
                        $('.vcp-poster,.vcp-bigplay').hide();
                        $('.tips-wrap').html('直播已结束,2s后跳转到直播列表').show();
                        var time_total = 2;
                        function count_down(time_total){
                            var time_rest = time_total - 1;
                            if(time_rest<=0){
                                window.location.href = '/Meeting/backlists';
                            }else {
                                setTimeout(function(){
                                    $('.tips-wrap').html('直播已结束,'+time_rest+'s后跳转到直播列表');
                                    count_down(time_rest);
                                },1000);
                            }
                        }
                        count_down(time_total);
                    }
//                    var play_btn = $(".play-btn");
                    function showPlayBtn (){
                        if(player.playing()){
                            play_btn.hide();
                        }else {
                            play_btn.show();
                            play_btn.on("click",function(){
                                player.play();
                                showPlayBtn();
                            });
                        }
                    }
//                    showPlayBtn();

                    var fullscreenBtn = $('.icon-fullscreen');
                    if(player.playing()){
                        fullscreenBtn.show();
                    }else {
                        fullscreenBtn.hide();
                    }
                    if(msg.type=="load"){
                        fullscreenBtn.off("lclick").on("click",function(){
                            if(!player.playing()){
                                return false;
                            }
                            player.fullscreen(true);
                        });
                    }

                }
            });

        });
    });
</script>

<script type="text/javascript" src="/index/sdk/webim.js?v=1"></script>
<script type="text/javascript" src="/index/sdk/json2.js"></script>
<script type="text/javascript" src="/index/js/im_group_notice.js"></script>
<script type="text/javascript" src="/index/js/im_base.js"></script>




</html>